import React from 'react'
import { Route, Switch, Link, Redirect } from 'react-router-dom'
import { TransitionGroup, CSSTransition } from 'react-transition-group'
import styled from 'styled-components'
import { Layout, Menu, Icon, Avatar, Popover, Modal, message, Row } from 'antd'
import Index from '@/pages/Index/Index'
import BrandManagement from '@/pages/BrandManagement/Index'
import VideoInterview from '@/pages/VideoInterview/Index'
import SchoolStory from '@/pages/SchoolStory/Index'
import SchoolDisplay from '@/pages/SchoolDisplay/Index'
import 'animate.css'

const { confirm } = Modal

const { Header, Content, Sider } = Layout
const Logo = styled.h2`color: #fff; text-align: center; line-height: 60px; margin: 0;`
const RMenu = styled.div`float: right; padding: 0 24px;`
const Name = styled.span`margin: 0 10px;`

class Home extends React.Component {
    state = {
        collapsed: false
    }
    
    // 显示隐藏左侧菜单
    toggle = () => {
        this.setState({ collapsed: !this.state.collapsed })
    }

    // 退出登录
    logOut = (ev) => {
        ev.preventDefault()
        const _this = this

        confirm({
            title: '确认要退出吗？',
            cancelText: '取消',
            okText: '确认',
            maskClosable: true,
            onOk() {
                return new Promise(resolve => {
                    message.info('退出成功！')
                    localStorage.clear()
                    _this.props.history.replace('/Login')
                    resolve()
                })
            }
        })
    }

    render() {
        const location = this.props.location

        return (
            <Layout style={{ height: '100vh' }}>
                <Sider trigger={ null } collapsible collapsed={ this.state.collapsed }>
                    {(() => this.state.collapsed ? <Logo>...后台</Logo> : <Logo>专题页管理后台</Logo>)()}
                    <Menu theme="dark" mode="inline" selectedKeys={[ location.pathname ]} defaultSelectedKeys={[ '/' ]}>
                        <Menu.Item key="/">
                            <Icon type="home" />
                            <Link style={{ display: 'inline' }} to='/'>首页</Link>
                        </Menu.Item>
                        <Menu.Item key="/BrandManagement">
                            <Icon type="flag" />
                            <Link style={{ display: 'inline' }} to='/BrandManagement'>品牌管理</Link>
                        </Menu.Item>
                        <Menu.Item key="/VideoInterview">
                            <Icon type="video-camera" />
                            <Link style={{ display: 'inline' }} to='/VideoInterview'>视频专访</Link>
                        </Menu.Item>
                        <Menu.Item key="/SchoolStory">
                            <Icon type="shop" />
                            <Link style={{ display: 'inline' }} to='/SchoolStory'>盟校故事</Link>
                        </Menu.Item>
                        <Menu.Item key="/SchoolDisplay">
                            <Icon type="picture" />
                            <Link style={{ display: 'inline' }} to='/SchoolDisplay'>盟校展示</Link>
                        </Menu.Item>
                    </Menu>
                </Sider>
                <Layout>
                    <Header style={{ background: '#fff', padding: 0 }}>
                        <Icon
                            type={ this.state.collapsed ? 'menu-unfold' : 'menu-fold' }
                            onClick={ this.toggle }
                            style={{
                                fontSize: '18px',
                                lineHeight: '64px',
                                padding: '0 24px',
                                cursor: 'pointer',
                                transition: 'color 0.3s'
                            }}
                        />
                        <RMenu>
                            <Avatar size={40} icon="user" />
                            <Name>管理员</Name>
                            <Popover placement="bottomRight" content={<div>
                                    <p><a onClick={ this.logOut } href="">退出</a></p>
                                </div>} trigger="click">
                                <Icon type="caret-down"  />
                            </Popover>
                        </RMenu>
                    </Header>
                    <Content
                        style={{
                            margin: '24px 16px',
                            padding: 24,
                            background: '#fff'
                        }}
                    >
                        <TransitionGroup>
                            <CSSTransition
                                key={ location.pathname }
                                classNames="fade"
                                timeout={ 500 }
                            >
                                <Switch location={ location }>
                                    <Route exact path="/" component={ Index } />
                                    <Route exact path="/BrandManagement" component={ BrandManagement } />
                                    <Route exact path="/VideoInterview" component={ VideoInterview } />
                                    <Route exact path="/SchoolStory" component={ SchoolStory } />
                                    <Route exact path="/SchoolDisplay" component={ SchoolDisplay } />
                                    <Redirect to={ '/' } />
                                </Switch>
                            </CSSTransition>
                        </TransitionGroup>
                    </Content>
                </Layout>
            </Layout>
        )
    }
}

export default Home